import {View} from 'react-native';
import React, {Component} from 'react';
import {Tab} from '@rneui/themed';
export default class Layout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '布局',
      index: 0,
    };
  }

  componentDidMount() {}

  render() {
    return (
      <View style={{flexDirection: 'column', height: '100%'}}>
        <View>
          <Tab
            value={this.state.index}
            onChange={e => {
              this.setState({
                index: e,
              });
            }}
            dense>
            <Tab.Item>列</Tab.Item>
            <Tab.Item>行</Tab.Item>
          </Tab>
        </View>
        <View style={{flex: 1}}>
          {this.state.index === 0 ? (
            <View
              style={{
                backgroundColor: 'red',
                flexDirection: 'column',
                height: '100%',
              }}>
              <View
                style={{
                  backgroundColor: 'yellow',
                  flex: 1,
                }}
              />
              <View
                style={{
                  backgroundColor: 'green',
                  flex: 1,
                }}
              />
              <View
                style={{
                  backgroundColor: 'blue',
                  flex: 2,
                  flexDirection: 'row',
                }}>
                <View
                  style={{
                    backgroundColor: 'white',
                    flex: 1,
                  }}
                />
                <View
                  style={{
                    backgroundColor: 'black',
                    flex: 1,
                  }}
                />
              </View>
            </View>
          ) : null}

          {this.state.index === 1 ? (
            <View
              style={{
                backgroundColor: 'red',
                flexDirection: 'row',
                height: '100%',
              }}>
              <View
                style={{
                  backgroundColor: 'yellow',
                  flex: 1,
                }}
              />
              <View
                style={{
                  backgroundColor: 'green',
                  flex: 1,
                }}
              />
              <View
                style={{
                  backgroundColor: 'blue',
                  flex: 2,
                  flexDirection: 'column',
                }}>
                <View
                  style={{
                    backgroundColor: 'white',
                    flex: 1,
                  }}
                />
                <View
                  style={{
                    backgroundColor: 'black',
                    flex: 1,
                  }}
                />
              </View>
            </View>
          ) : null}
        </View>
      </View>
    );
  }
}
